<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="courseId" placeholder="Please input" style="width: 300px;" class="filter-item" />
      <el-button style="width: 100px" class="filter-item" type="primary" icon="el-icon-search" @click="searchCA(courseId)">Search</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >Add</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="100">
        <template slot-scope="scope">{{ scope.$index+1  }}</template>
      </el-table-column>

      <el-table-column label="课程号" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.courseCode }}</template>
      </el-table-column>

      <el-table-column label="课程名称" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.courseName }}</template>
      </el-table-column>

      <el-table-column label="班级" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.classId }}</template>
      </el-table-column>

      <el-table-column label="学号" align="center" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.studentId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="姓名" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.studentName }}</template>
      </el-table-column>

      <el-table-column label="出勤次数" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.whetherAttendance }}</span>
        </template>
      </el-table-column>

      <el-table-column label="出勤率" width="140" align="center">
        <template slot-scope="scope">{{ scope.row.attendanceRate}}</template>
      </el-table-column>
      <!-- <el-table-column label="Jtitle" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.jtitle }}
        </template>
      </el-table-column>-->

      <el-table-column
        label="Actions"
        align="center"
        width="300"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editCA(scope.row.courseId)">
            Edit
            </el-button>
          <el-button size="mini" type="danger" @click="deleteCA(scope.$index, scope.row)">
            Delete
            </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from "@/api/attendance/tableCA";
import { delTableRow } from "../../../api/attendance/tableCA"
import { searchList } from "../../../api/attendance/tableCA"

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: [
        {
          courseId: 22,
          dateCreated: 1591240353969,
          dateModified: 1591240353969,
          deleted: null,
          entityName: null,
          coueseCode: 'javaEE1',
          classId: 'software_one',
          studentId: '0_1',
          studentName: 'name_1',
          whetherAttendance: '是'
        }
      ],
     name:'',
     courseId:''
    };
  },
  created() {
    this.fetchData();
  },
  handleModifyStatus(row, status) {
    this.$message({
      message: "操作Success",
      type: "success"
    });
    row.status = status;
  },
  handleFilter() {
    this.listQuery.page = 1;
    this.getList();
  },
  handleDelete(row, index) {
    this.$notify({
      title: "Success",
      message: "Delete Successfully",
      type: "success",
      duration: 2000
    });
    this.list.splice(index, 1);
  },
  handleUpdate(row) {
    this.temp = Object.assign({}, row); // copy obj
    this.temp.timestamp = new Date(this.temp.timestamp);
    this.dialogStatus = "update";
    this.dialogFormVisible = true;
    this.$nextTick(() => {
      this.$refs["dataForm"].clearValidate();
    });
  },
  methods: {
     searchCA(courseId){
            var vm = this;
            //console.log(typeof (courseId));
              searchList(undefined, Number(courseId)).then(res => {
                console.log(res);
                vm.list = [];
                var a = vm.list.push(JSON.parse(res));
              //vm.list = res;
               console.log(a);
               console.log(this.list)
            })
          },
    editCA(courseId) {
      this.$router.push("/editCourseAttendance/index/"+courseId);
    },
    deleteCA(idx,row){
      alert("删除成功");
      console.log("索引",idx);
      console.log("数据");
      delTableRow(row.courseId).then((res) => {
        console.log(res)
      })
    },
    fetchData() {
      var vm = this;
      getList().then(res => {
        console.log(res.content);
        vm.list = res.content;
      })
    }
  }
}
</script>
